<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: #fff;
			color: #222;
		}

		.aui-content {
			padding: 1.5rem;
		}

		.textarea {
			/*background: #ddd;*/
			margin-bottom: 0.75rem;
			height: 4rem;
		}

		.images {
			/*margin-bottom: 0.75rem;*/
			margin: -0.15rem;
			overflow: hidden;
		}

		.images .aui-col-xs-4 {
			padding: 0.15rem;
			height: 119px;
			overflow: hidden;
			margin-bottom: 0.15rem;
		}

		.images .aui-col-xs-4 img {
			width: 100%;
			/*height: 100%;*/
		}

		.typeid {
			margin-top: 2rem;
		}
		#typeid_name{
			color: #555;
			font-size: 0.85rem;
		}
		.video{
			/*margin-bottom: 0.75rem;*/
			overflow: hidden;
			width: 100%;
			background: #f8f8f8;
			/*background: #f00;*/
			border-radius: 0.5rem;
		}
	</style>
</head>

<body>
	<div class="aui-content">
		<div class="textarea"><textarea id="content" placeholder="这一刻的想法..."></textarea></div>
		<div class="images aui-hide">
			<div class="aui-row">
				<script id="sx-list" type="text/x-dot-template">
					{{ for(var i=0; i< it.length; i++) { }}
					<div class="aui-col-xs-4">
						<img src="{{= it[i]}}">
					</div>
					{{ } }}
				</script>
			</div>
			<div id="sx-view"></div>
			<div class="aui-col-xs-4" id="articlr_add" tapmode onclick="img()">
				<img src="../i/articlr_add.png">
			</div>
		</div>
		<div class="video aui-hide">
			<!-- <img src="../i/loading_720.png"> -->
		</div>
		<div class="aui-card-list typeid">
			<div class="aui-card-list-content">
				<ul class="aui-list aui-media-list">
					<li class="aui-list-item aui-list-item-middle aui-padded-l-5" tapmode onclick="typeid()">
						<div class="aui-media-list-item-inner">
							<div class="aui-list-item-media aui-margin-r-15" style="width: 1.58rem;">
								<img src="http://qiniu.live.kxg99.com/yuzhibo"/article_typeid.png">
							</div>
							<div class="aui-list-item-inner aui-list-item-arrow" id="typeid_name" data-id="0">
								选择栏目
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var articlr_add, max = 9,
		UIAlbumBrowser,video_img;
	apiready = function() {
		urls();
		if (api.pageParam['video']) {
			var _this = $('.video');
			_this.removeClass('aui-hide');
			_this.css('height',(_this.width()-80)+'px');
			_video_open({url:api.pageParam['video'],img:'',w:_this.width(),h:_this.width()-80,fixed:true,y:_this.offset().top,x:_this.offset().left,radius:8,hideControl:true});
		}else{
			$('.images').removeClass('aui-hide');
			articlr_add = $('#articlr_add').width();
			$('.aui-col-xs-4').css('height', articlr_add + 'px');
			UIAlbumBrowser = api.require('UIAlbumBrowser');
			if(api.pageParam['images']){
				batchTransPath();
			}
		}
	}

	function fabu() {
		document.activeElement.blur();
		var json = {}
		json.content = $('#content').val();
		json.typeid = $('#typeid_name').data('id');
		if (api.pageParam['video']) {
			json.channel = 2;
			json.data = api.pageParam['video'];
			json.img = video_img;
		} else {
			var img_len = $('#sx-view .aui-col-xs-4');
			if (!parseInt(img_len.length)) {
				return _msg('请上传图片');
			}
			json.channel = 1;
			var images = [];
			for (var i = 0; i < img_len.length; i++) {
				var a = img_len.eq(i).children().attr('src');
				if (a) {
					images.push(a);
				}
			}
			json.data = images;
		}
		api.execScript({
			name: 'root',
			frameName:'index_header',
			script: 'article_loading(\''+JSON.stringify(json)+'\')'
		});
		api.closeWin();
		_hone();
	}
	// 选择图片
	function img() {
		var img_len = parseInt($('#sx-view .aui-col-xs-4').length);
		if (img_len >= 9) {
			articlr_add_hide();
			return _msg('最多选择9张图片')
		}
		UIAlbumBrowser.open({
			type: 'image',
			max: max - img_len,
			isOpenPreview: true,
			alertTitle:'最多选择'+(max - img_len)+'张',
			styles: {
				bg: '#323232',
				mark: {
					// icon: '',
					position: 'top_right',
					size: 20
				},
				nav: { //（可选项）JSON对象；导航栏样式
					bg: '#403D3A', //（可选项）字符串类型；导航栏背景，支持 rgb，rgba，#；默认：'rgba(0,0,0,0.6)'
					titleText: '', //（可选项）字符串类型；标题 (仅支持安卓)
					titleColor: '#fff', //（可选项）字符串类型；标题文字颜色，支持 rgb，rgba，#；默认：'#fff'
					titleSize: 18, //（可选项）数字类型；标题文字大小，默认：18
					cancelColor: '#fff', //（可选项）字符串类型；取消按钮的文字颜色；支持 rgb，rgba，#；默认：'#fff'
					cancelSize: 18, //（可选项）数字类型；取消按钮的文字大小；默认：18
					cancelText: '取消', //（可选项）字符串类型；取消按钮文字内容；默认：'取消'
					finishText: '完成', //（可选项）字符串类型；完成按钮文字内容；默认：'完成'
					finishColor: '#FFF', //（可选项）字符串类型；完成按钮的文字颜色，支持 rgb，rgba，#；默认：'#fff'
					finishWidth: 50, //（可选项）数字类型；完成按钮的宽度；默认：50 (仅支持iOS)
					unFinishColor: 'rgba(255,255,255,0.25)', //（可选项）字符串类型；打开页面还未选择图片或视频的完成按钮的文字颜色，支持 rgb，rgba，#；默认：'rgba(64,224,208,0.25)'
					finishSize: 18, //（可选项）数字类型；完成按钮的文字大小；默认：16
					numberSize: 20, //（可选项）数字类型；数字显示的大小；默认：20  **仅支持iOS**
					numberFontSize: 14, //（可选项）数字类型；数字显示文字的大小；默认：14    **仅支持iOS**
					numberTextColor: '#fff', //（可选项）字符串类型；数字显示的文字颜色，支持 rgb，rgba，#；默认：'#fff' **仅支持iOS**
					numberBgColor: '#FE2C55', //（可选项）字符串类型；数字显示的背景颜色，支持 rgb，rgba，#；默认：'#00FA9A' **仅支持iOS**
					numberCorner: 10, //（可选项）字符串类型；数字显示的圆角度，#；默认：10 **仅支持iOS**
				},
				bottomTabBar: { //（可选项）JSON对象；底部导航栏样式  **该项参数仅支持iOS**
					bg: 'rgba(0,0,0,0.75)', //（可选项）字符串类型；底部导航栏背景，支持 rgb，rgba，#；默认：'rgba(0,0,0,0.6)'
					unPreviewTitleColor: 'rgba(255,255,255,0.25)', //（可选项）字符串类型；打开页面还未选择图片或视频的预览的文字颜色，支持 rgb，rgba，#；默认：'rgba(0,0,0,0.25)'
					previewTitleColor: '#fff', //（可选项）字符串类型；选择图片或视频的预览的文字颜色，支持 rgb，rgba，#；默认：'#000000'
					previewTitle: '预览', //（可选项）字符串类型；选择图片或视频的预览的文字；默认：'预览'
					previewTitleSize: 15, //（可选项）数字类型；标题文字大小，默认：15
				}
			},
			// exchange : true,
			// rotation : true
		}, function(ret) {
			if (ret.eventType == 'confirm') {
				// _url({animation:true,images:ret.list},'article_member_add_win')
				batchTransPath(ret.list);
			}
		});
	}
	// 转换原图
	function batchTransPath(img) {
		_loading();
		var images = [];
		if (!img) {
			img = api.pageParam['images'];
		}
		if (!img) {
			return _msg('图片获取失败，请重新选择图片');
		}
		for (var i = 0; i < img.length; i++) {
			images.push(img[i].path);
		}
		UIAlbumBrowser.batchTransPath({
			path: images
		}, function(ret, err) {
			if (ret.path.length) {
				var evalData = doT.template($api.html($api.byId('sx-list')));
				$api.append($api.byId('sx-view'), evalData(ret.path));
			} else {
				_alert('图片获取失败，请重新选择图片');
			}
			articlr_add_hide();
			setTimeout(function() {
				_loadingCloes();
			}, 300)
		});
	}
	// 上传图片按钮是否隐藏
	function articlr_add_hide() {
		var img_len = parseInt($('#sx-view .aui-col-xs-4').length);
		if (img_len >= 9) {
			$('#articlr_add').addClass('aui-hide');
		} else {
			$('#articlr_add').removeClass('aui-hide');
		}
	}
	// 选择栏目
	function typeid(){
		var UIActionSelector = api.require('UIActionSelector');
		var datas = _getPrefs('_config').article_typeid.typeid
		UIActionSelector.open({
		    datas: datas,
		    layout: {
		        row: 10,
		        col: 1,
		        height: 40,
		        size: 16,
		        sizeActive: 15,
		        rowSpacing: 10,
		        colSpacing: 20,
		        maskBg: 'rgba(0,0,0,0.5)',
		        bg: '#f8f8f8',
		        color: '#222',
		        colorActive: '#FE2C55',
		        colorSelected: '#FE2C55'
		    },
				bgCorner:10,
		    animation: true,
				// iPhoneXBottomHeight:50,
				// lineColor:'#fff',
				// lineHeight:20,
				selectorDividerColor:'#ddd',
		    cancel: {
		        text: '取消',
		        size: 14,
		        w: 70,
		        h: 35,
		        bg: '#ccc',
		        bgActive: '#ccc',
		        color: '#fff',
		        colorActive: '#fff'
		    },
		    ok: {
		        text: '选择',
		        size: 14,
		        w: 70,
		        h: 35,
		        bg: '#FE2C55',
		        bgActive: '#FE2C55',
		        color: '#FFF',
		        colorActive: '#fff'
		    },
		    title: {
		        text: '',
		        size: 12,
		        h: 50,
		        bg: '#fff',
		        // color: '#888'
		    },
		    fixedOn: api.frameName
		}, function(ret, err) {
		    console.log(JSON.stringify(ret)+JSON.stringify(err))
				if(ret.eventType == 'ok'){
					if(ret.level1 == '不选择'){
						ret.level1 = '选择栏目'
					}
					$('#typeid_name').text(ret.level1);
					$('#typeid_name').data('id',ret.selectedInfo[0].id);
				}
		});
	}
</script>

</html>
